<script lang="ts" setup>
import { reactive } from "vue";
import { shopApply } from "../common/api/index";
const from = reactive({
	name:'',
	phone:'',
	shopname:'',
	address:''
})
const list=reactive([
	'139****5509的商家获得￥115200佣金',
	'193****0206的商家获得￥97200佣金',
	'134****7757的商家获得￥89100佣金',
	'176****6435的商家获得￥83250佣金',
	'132****1249的商家获得￥78750佣金',
	'185****8899的商家获得￥70200佣金',
	'136****0446的商家获得￥68400佣金',
	'151****7977的商家获得￥67050佣金',
	'152****1767的商家获得￥63450佣金',
	'188****1523的商家获得￥62550佣金'
])
const rankList=reactive([
	{id:1,phone:'193****0206',money:115200},
	{id:2,phone:'139****5509',money:97200},
	{id:3,phone:'134****7757',money:89100},
	{id:4,phone:'136****0446',money:83250},
	{id:5,phone:'176****6435',money:78750},
	{id:6,phone:'132****1249',money:70200},
	{id:7,phone:'166****5562',money:68400},
	{id:8,phone:'151****7977',money:67050},
	{id:9,phone:'152****1767',money:63450},
	{id:10,phone:'188****1523',money:62550}
])

function submit() {
	console.log(from);
	let data={
		mobile:from.phone,
		name:from.name,
		shop_name:from.shopname,
		shop_address:from.address,
	}
	console.log(data);
	if(data.mobile==''||data.name==''||data.shop_name==''||data.shop_address==''){
		alert("请填写信息哦")
		return
	}else{
		shopApply(data).then(res=>{
			alert("提交成功！耐心等下审核~")
		})
	}
	
}
function backTop() {
    window.scrollTo({
        top: 1200,
        left: 0,
        behavior: "smooth"
    })
}
// getIPhoneData();
// function getIPhoneData() {
// 	getIPhoneList({
// 		cate_id: "53",
// 		convey_type: 1,
// 		orderby_name: "id",
// 		sort: "desc",
// 		size: 1,
// 		pageSize: 9
// 	}).then(res => {
// 		const data = res.data.data;
// 		dataList.push(...data);
// 	})
// }
</script>
<template>
	<div class="container">
		<div class="scroll">
			<div class="scroll_list" v-for="item in list">{{item}}</div>
		</div>
		<div class="nav">
			<div class="money">999</div>
			<img class="img" src="/src/assets/images/promotion/img01.png" alt="">
			<div>
				<button class="btn" @click="backTop">立即加入推广</button>
			</div>
		</div>
		<div class="step">
			<img class="img" src="/src/assets/images/promotion/img02.png" alt="">
		</div>
		<div class="from">
			<img class="img" src="/src/assets/images/promotion/img03.png" alt="">
			<div class="from-info">
				<div class="info">
					<span class="font">姓&nbsp;&nbsp;&nbsp名&nbsp;&nbsp;</span><input class="input" type="text" v-model="from.name" placeholder="与身份证姓名一致">
				</div>
				<div class="info">
					<span class="font">手机号&nbsp;&nbsp;</span><input class="input" type="text" v-model="from.phone" placeholder="请输入手机号">
				</div>
				<div class="info">
					<span class="font">店铺名&nbsp;&nbsp;</span><input class="input" type="text" v-model="from.shopname" placeholder="请输入您的店铺名称">
				</div>
				<div class="info" style="border-bottom: 0.5px solid #E8E8E8;">
					<span class="font">地&nbsp;&nbsp;&nbsp址&nbsp;&nbsp;</span><input class="input" type="text" v-model="from.address" placeholder="请输入您的店铺地址">
				</div>
				<div style="display: flex;justify-content: center;align-items: center;margin-top: 20px;">
					<button class="btn_form" @click="submit">提&nbsp;&nbsp;交</button>
				</div>
			</div>
		</div>
		<div class="ranks">
			<img class="img" src="/src/assets/images/promotion/img04.png" alt="">
			<div class="ranks_title">
				<table style="text-align: center;">
					<tr>
						<th style="color: #999;">排名</th>
						<th style="color: #999;">手机号</th>
						<th style="color: #999;">收益</th>
					</tr>
					<tr v-for="item in rankList">
						<td style="width: 150px;height: 30px;" v-if="item.id==1">
							<img class="img" src="/src/assets/images/promotion/rank1.png" style="width: 20px;height: 20px;" alt="">
						</td>
						<td style="width: 150px;height: 30px;" v-else-if="item.id==2">
							<img class="img" src="/src/assets/images/promotion/rank2.png" style="width: 20px;height: 20px;" alt="">
						</td>
						<td style="width: 150px;height: 30px;" v-else-if="item.id==3">
							<img class="img" src="/src/assets/images/promotion/rank3.png" style="width: 20px;height: 20px;" alt="">
						</td>
						<td style="width: 150px;height: 30px;" v-else>
							{{item.id}}
						</td>
						<td style="width: 150px;">{{item.phone}}</td>
						<td style="width: 200px;">￥{{item.money}}</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
	.container{
		width: 750px;
		height: auto;
		background: #FE6928;
	}
	.scroll{
		width: 600px;
		position: relative;
		top: 50px;
		left: 100px;
		height: 55px;
		overflow: hidden;
		.scroll_list{
			display: flex;
			justify-content: center;
			width: 550px;
			background: rgba(255,247,242,0.25);
			color: #fff;
			border-radius: 30px;
			padding: 10px;
			margin-bottom: 5px;
			animation: scroll 2s linear infinite;
		}
	}
	@keyframes scroll {
	  0% {
	    transform: translateY(0);
	  }
	  100% {
	    transform: translateY(-100%);
	  }
	}
	.nav{
		position: relative;
		.money{
			position: absolute;
			top:450px;
			left: 220px;
			font-size: 95px;
			font-weight: bolder;
			color:  #F85932
		}
		.img{
			width: 100%;
			height: 100%;
			background-size: cover;
		}
		.btn{
			position: absolute;
			top: 750px;
			left: 230px;
			width:300px;
			height: 60px;
			background: #FFE087;
			box-shadow: 0px 4px 4px 0px rgba(255,216,135,0.44);
			border-radius: 40px;
			font-size: 32px;
			text-align: center;
			font-family: Microsoft YaHei-Bold, Microsoft YaHei;
			font-weight: bold;
			color: #FA0C00;
			font-weight: bold;
			line-height: 50px;
			border: 0px solid #FFE087;
		}
	}
	.step{
		width: 95%;
		margin: 0 auto;
		margin-top: -60px;
	}
	.from{
		width: 95%;
		margin: 0 auto;
		position: relative;
		.font{
			font-size: 32px;
			font-family: Microsoft YaHei-Regular, Microsoft YaHei;
			font-weight: 400;
			color: #FFAE2C;
		}
		.input{
			background-color: transparent;
			border: 0px solid transparent;
			font-size: 28px;
			width: 480px;
			height: 50px;
			color: #999999;
			outline: none;
		}
		.info{
			padding: 20px;
			border-top: 0.5px solid #E8E8E8;
		}
		.from-info{
			position: absolute;
			top: 100px;
			left: 25px;
			padding: 0px 20px;
		}
		.btn_form{
			width: 180px;
			height: 60px;
			background: #FE6928;
			box-shadow: 0px 4px 8px 0px rgba(254,105,40,0.18);
			border-radius:40px;
			border: 0px solid transparent;
			color: #fff;
			font-weight: bold;
			font-size: 35px;
			
		}
	}
	.ranks{
		width: 95%;
		margin: 0 auto;
		position: relative;
		.ranks_title{
			position: absolute;
			top: 90px;
			left: 25px;
		}
		.ranks_title1{
			position: absolute;
			top: 130px;
			left: 25px;			
			max-height: 300px;
		}
		.ranks_item{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0px 40px;
		}
		.ranks_item div{
			margin-bottom: 25px;
		}
	}
	.img{
		width: 100%;
		height: 100%;
		background-size: cover;
	}
</style>
